<!-- 字典项 -->
<template>
	<div>
		<el-dialog v-model="openDictItem" :title="'字典项管理'" width="80%" append-to-body center :close-on-click-modal="false">
			<!--查询列表-->
			<YdTable
				ref="multipleTable"
				:formData="queryParams"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				@sizeChangeHandler="getList"
				@currentChangeHandler="getList"
				@sortChangeHandler="getList"
			>
			</YdTable>
			<!-- 添加或修改参数配置对话框 -->
			<el-dialog v-model="addDictItem" :title="addDictItemTitle" width="50%" append-to-body center :close-on-click-modal="false">
				<el-form ref="dictForm" :model="form" :rules="rules" label-width="80px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="类型">
								<el-input v-model="form.dictType" placeholder="请输入类型" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="数据值" prop="value">
								<el-input v-model="form.value" placeholder="请输入数据值" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="标签名" prop="label">
								<el-input v-model="form.label" placeholder="请输入标签名" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="描述" prop="description">
								<el-input v-model="form.description" placeholder="请输入描述" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="排序" prop="sortOrder">
								<el-input-number v-model="form.sortOrder" :min="1" controls-position="right" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="备注信息">
								<el-input v-model="form.remarks" placeholder="请输入备注信息" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cacelClick">取 消</el-button>
				</template>
			</el-dialog>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive, ref, getCurrentInstance } from 'vue';
import { listData, delData, updateData, getData, addData, getDicts } from '@/api/admin/dict/data';
import { dictItemPage } from '@/api/admin/dict';
const { proxy }: any = getCurrentInstance();
const queryParams = reactive({
	pageSize: 10,
	pageNum: 1,
	current: 1,
	size: 10,
});
let form = ref<any>({ dictType: '' });
const tableData = reactive({
	data: [] as any,
});
const openDictItem = ref(false);
const addDictItem = ref(false);
const addDictItemTitle = ref('');
// 列表配置
let tableConfig = reactive({
	columns: [
		{
			label: '类型',
			prop: 'dictType',
		},
		{
			label: '数据值',
			prop: 'value',
		},
		{
			label: '标签名',
			prop: 'label',
			showOverFlowToolTip: true,
		},
		{
			label: '描述',
			prop: 'description',
		},
		{
			label: '排序',
			prop: 'sortOrder',
		},
		{
			label: '备注信息',
			prop: 'remarks',
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '修改',
					handler: (scope: any) => handleAdd(scope.row),
					permi: ['system:dict:edit'],
				},
				{
					text: '删除',
					handler: (scope: any) => handleDelete(scope.row),
					permi: ['system:dict:remove'],
				},
			],
		},
	],
	// 工具栏
	toolBar: [{ name: '新增', icon: 'yd-icon-plus', permi: ['system:dict:add'], handler: () => handleAdd() }],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 表单校验
const rules = ref({
	value: [{ required: true, message: '数据值不能为空', trigger: 'blur' }],
	label: [{ required: true, message: '标签名不能为空', trigger: 'blur' }],
	description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
	sortOrder: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
});
const dictForm = ref();
let flag = '';
let dictId = '';
function resetForm() {
	form.value = {
		dictType: flag,
		value: '',
		label: '',
		description: '',
		sortOrder: 1,
		remarke: '',
		id: '',
	};
}
function cacelClick() {
	resetForm();
	addDictItem.value = false;
}
/** 查询字典类型列表 */
function getList() {
	tableConfig.loading = false;
	queryParams.current = queryParams.pageNum;
	queryParams.size = queryParams.pageSize;
	dictItemPage(queryParams)
		.then((res: any) => {
			tableData.data = res.data.records;
			dictId = tableData.data[0].dictId;
			tableConfig.pagination.total = res.data.total;
			tableConfig.loading = false;
		})
		.catch((e: any) => {
			tableConfig.loading = false;
		});
}
/** 新增按钮操作 */
function handleAdd(row?: any) {
	let id;
	if (row) {
		id = row.id;
	} else {
		id = '';
	}
	if (id) {
		getData(id).then((response: any) => {
			let data = response.data;
			form.value.dictType = data.dictType;
			form.value.value = data.value;
			form.value.label = data.label;
			form.value.description = data.description;
			form.value.sortOrder = data.sortOrder;
			form.value.remarks = data.remarks;
			form.value.id = data.id;
			dictId = data.dictId;
			addDictItemTitle.value = '编辑';
			addDictItem.value = true;
		});
	} else {
		form.value.dictType = flag;
		form.value.dictId = dictId;
		addDictItem.value = true;
		addDictItemTitle.value = '新增';
	}
}

/** 提交按钮 */
function submitForm() {
	proxy.$refs['dictForm'].validate((valid: boolean) => {
		if (valid) {
			if (form.value.id) {
				updateData(form.value).then((response) => {
					if (response.code === 0) {
						proxy.$modal.msgSuccess('修改成功');
						resetForm();
						addDictItem.value = false;
						getList();
					} else {
						proxy.$modal.msgWarning(response.msg);
					}
				});
			} else {
				addData(form.value).then((response: any) => {
					if (response.code === 0) {
						proxy.$modal.msgSuccess('新增成功');
						resetForm();
						addDictItem.value = false;
						getList();
					} else {
						proxy.$modal.msgWarning(response.msg);
					}
				});
			}
		}
	});
}
/** 删除按钮操作 */
function handleDelete(row?: any) {
	let dictIds = row?.id;
	proxy.$modal
		.confirm('是否确认删除字典数据项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			closeOnClickModal: false,
		})
		.then(function () {
			delData(dictIds).then((res: ApiResponse) => {
				if (res.code !== 0) {
					ElMessage.error(res.msg);
					return;
				}
				getList();
				ElMessage.success('删除成功');
			});
		});
}

function showDialog(row: any) {
	openDictItem.value = true;
	form.value.dictType = row.dictType;
	queryParams.dictType = row.dictType;
	flag = row.dictType;
	getList();
}
defineExpose({
	showDialog,
});
</script>
<style scoped lang="scss">
:deep .el-input-number__decrease,
:deep .el-input-number__increase {
	background-color: rgba(0, 0, 0, 0.2) !important;
	border-right: none !important;
	border-left: none !important;
}
</style>
